<template>
	<u-tabbar
		:value="currentTab"
		:activeColor="textColor.checked"
		:inactiveColor="textColor.default"
	>
		<block v-if="iconType == 1">
			<u-tabbar-item
				v-for="(item,i) in tabList"
				:key="item.name"
				:text="item.text"
				:name="item.name"
				@click="handTab(item)"
				:class="['iconfont',item.icon]"
				:style="item.name==currentTab?`color:${iconColor.checked};`:`${iconColor.default};`"
			></u-tabbar-item>
		</block>
		<block v-else>
			<u-tabbar-item
				v-for="(item,i) in tabList"
				:key="item.name"
				:text="item.text"
				:name="item.name"
				@click="handTab(item)"
			>
				<image class="bar_img" slot='active-icon' :src="item.selectedIconPath"></image>
				<image class="bar_img" slot='inactive-icon' :src="item.iconPath"></image>
			</u-tabbar-item>
		</block>
	</u-tabbar>
</template>

<script>
	import baseUrl from '@/utils/baseUrl.js'
	export default {
		name: 'tabbar',
		props: {
			currentTab: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				tabList: [],
				textColor: [],
				iconColor: [],
				iconType: 1
			}
		},
		created() {
			/*底部菜单信息*/
			this.getBottom();
		},
		methods: {
			handTab(row) {
				this.$Router.pushTab({
					"path": row.pagePath,
					"query" : {
						name: row.name
					}
				})
			},
			
			getBottom() {
				this.$request({url: '/fitment/bottom_menu',data: {}}).then(res => {
					// 底部文字选中和未选中颜色
					this.textColor = res.msg.textcolor;
					// 底部icon的选中和未选中颜色
					this.iconColor = res.msg.iconcolor;
					// icon的类型 图片/图标
					this.iconType = res.msg.type
					// console.log(this.iconType);
					// 底部信息
					const {tablist} = res.msg;
					let tabData = [];
					tablist.forEach((item,index)=>{
						let url = this.setLinkData(item.linkdata.link);
						// console.log(item);
						tabData.push({
							'pagePath': url,
							'iconPath': `${baseUrl+item.url}`, //未选中icon
							'selectedIconPath': `${baseUrl+'/'+item.active_url}`, // 选中icon
							'text': item.text,
							'name': item.linkdata.id,
							'icon': item.icon
						})
					})
					this.tabList = tabData;
					// console.log(tabData);
				})
			},
			
			setLinkData(item) {
				/*tab挑战链接处理*/
				return `${'/pages'+item.substring(2)}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bar_img {
		width: 50rpx;
		height: 45rpx;
	}
	.iconfont {
		font-size: 40rpx;
	}
</style>